<template>
  <!-- 利用elementUI完成轮播图 -->
  <div class="block">
    <el-carousel trigger="click" class="carousel">
      <el-carousel-item
        v-for="(item, i) in categoryList.slice(0, 4)"
        :key="i"
      >
        <img :src="item.thumbnail" class="carousel" @click="showArticle(item.newsId)"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Carousel",
  props: ["categoryList"],
  data() {
    return {
      bannerList: [
        {
          id: "1",
          imgUrl:
            "https://tse2-mm.cn.bing.net/th/id/OIP-C.2rQ25qnSMQHXGcHz3Rp2pAHaEo?w=289&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        },
        {
          id: "2",
          imgUrl:
            "https://tse1-mm.cn.bing.net/th/id/OIP-C.JQ-VhVrsScl0rLNrPtMlcQHaE8?w=270&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        },
        {
          id: "3",
          imgUrl:
            "https://tse1-mm.cn.bing.net/th/id/OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK?w=321&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        },
        {
          id: "4",
          imgUrl:
            "https://tse2-mm.cn.bing.net/th/id/OIP-C.xsA-3qUw6cqmd8nRfxk6TQHaEK?w=321&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      // bannerList: (state) => state.home.bannerList,
    }),
  },
  methods: {
    async showArticle(newsId) {
      let link = this.$router.resolve({
        path: "/article",
        query: {
          artId: newsId,
          isNews: true,
        },
      });
      window.open(link.href, "_blank");
    },
  },
  // mounted() {
  //   console.log("我是carousel的mounted");
  //   console.log(this.categoryList);
  // },
};
</script>

<style scoped lang="less">
.carousel {
  width: 100%;
  height: 100%;
  // object-fit: cover;
}
</style>